<template>
  <view class="box">
    <!--收益日历-->
    <view style="display: flex; text-align: center">
      <view v-for="(i, index) in calendarTitleList" :key="index" style="flex: 1; font-size: 22rpx">
        <view>{{ i }}</view>
        <view
          style="
            width: 96%;
            margin: 10rpx auto;
            border: 1px solid #f2f2f2;
            border-radius: 10rpx;
            font-size: 16rpx;
            padding: 10rpx 0rpx;
          "
        >
          <view style="font-size: 20rpx; margin-bottom: 10rpx">01</view>
          <view>+200</view>
        </view>
      </view>
    </view>
    <!--分隔线-->
    <wd-gap></wd-gap>

    <!--买卖点-->
    <wd-row>
      <wd-col :span="6">
        <view class="item">
          <view class="item-data">2025-06-08</view>
          <view class="item-desc">首次建仓日期</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">2025-06-08</view>
          <view class="item-desc">最近加仓日期</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">2025-06-08</view>
          <view class="item-desc">最近减仓日期</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">8</view>
          <view class="item-desc">累计加仓次数</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">8</view>
          <view class="item-desc">累计减仓次数</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">800</view>
          <view class="item-desc">累计收益金额</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">90</view>
          <view class="item-desc">累计建仓天数</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">90</view>
          <view class="item-desc">本月收益金额</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">8%</view>
          <view class="item-desc">累计收益率</view>
        </view>
      </wd-col>

      <wd-col :span="6">
        <view class="item">
          <view class="item-data">-900</view>
          <view class="item-desc">累计最大亏损额</view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<script lang="ts" setup>
import { http } from '@/utils/http'

// 定义可传递属性
const props = defineProps({
  // 基金ID,即fundId
  id: {
    type: String,
    default: '',
  },
  // 线型：optional => 自选，hold => 持有，default => 默认
  lineType: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['change'])
// 日历表头
const calendarTitleList = ref(['日', '一', '二', '三', '四', '五', '六'])
</script>

<style lang="scss" scoped>
.box {
  .item {
    font-size: 22rpx;
    margin-bottom: 20rpx;
    text-align: center;
    .item-data {
      margin-bottom: 6rpx;
    }
    .item-desc {
      color: #3b3b3b;
    }
  }
}
</style>
